<!DOCTYPE html>
<html ng-controller="ChatCtrl" class="ng-scope">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height">
  <title>陪你聊天</title>
   <!--[if lte IE 8]>
  <script>
          document.createElement('service-record');
          document.createElement('user-record');
          document.createElement('system-notice');
      </script>
  <![endif]-->

  <style type="text/css">
    @charset "UTF-8";
    .ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
  </style>
 
  <link type="image/x-icon" rel="shortcut icon" href="">

  <link rel="stylesheet" type="text/css" href="./css/main.css">



</head>
<body style="">
<div class="eui-cover ng-hide" ng-show="isLoading">
  <span class="eui-loading"></span>
</div>
<div class="web-wrapper" style="">
  <div class="web-main-hd-bd" style="">
    <div class="web-main-header">
      <span class="web-header-logo"></span>
      <div class="web-header-info">
        <h1 class="title ng-binding">陪你聊天</h1>
        <p class="describe ng-binding">
          超话唠机器人
        </p>
      </div>
    </div>

    <div class="web-main-body" style="">

      <div class="web-main-content" style="">

        <div class="web-record-box" id="chat_msgs">

          <!-- 聊天展示页面 开始-->
          <div class="chat-msgs"  >
          </div>
          <!-- 聊天展示页面 结束-->
        </div>

        <!-- 用户操作框 -->
        <div class="web-ueditor-box" uy-editor="ueditorOptions" style="">
          <!-- 输入框 -->
          <div class="ueditor-input-con" style="padding: 3px;">
            <textarea class="manual-ueditor" placeholder="请输入你要说的话"></textarea>
          </div>
          <!-- 输入框 -->
          <!-- 确认按钮 -->
          <div class="ueditor-send-con">
            <input type="button" class="btn-send" value="发送"  onclick="sendMsg()">
            <span class="send-tip" >支持Ctrl+Enter快捷键发送</span>
          </div>
          <!-- 确认按钮 -->
        </div>
      </div>

      <!-- 常用问答功能 -->
      <div class="web-main-sidebar">
        <div class="web-main-sidebar-inner">
          <div class="eui-tab-01 web-sidebar-con">
            <ul class="tab-tt-01">
              <li class="cur">快捷输入</li>
            </ul>
            <div class="tab-cc-01 active">
              <ul class="eui-txt-list-01 fs12">
                <li class="list-item ng-scope click-question" >
                  <i class="no ng-binding">1.</i>
                  <p class="cw"><a class="c ng-binding" >你好</a></p>
                </li>
                <li class="list-item ng-scope click-question" >
                  <i class="no ng-binding">2.</i>
                  <p class="cw"><a class="c ng-binding" >今天天气</a></p>
                </li>
                <li class="list-item ng-scope click-question" >
                  <i class="no ng-binding">3.</i>
                  <p class="cw"><a class="c ng-binding" >唱首歌</a></p>
                </li>
                <li class="list-item ng-scope click-question" >
                  <i class="no ng-binding">4.</i>
                  <p class="cw"><a class="c ng-binding" >你的名字</a></p>
                </li>

              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="web-main-footer">
    欢迎来到这里 
  </div>
</div>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/config.js"></script>
<script>
  //快捷输入
  $('.click-question').click(function(){
      var msg = $(this).children('p').children('a').text();
      $('.manual-ueditor').val(msg);
  });

  function sendMsg(){
    $('.btn-send').attr('disabled',true);
    var msg = $('.manual-ueditor').val();
    if(msg.length <= 0){
      return false;
    }
    var pushdata = {
        'key' : apikey,
        'info':msg,
    };
    // 输出到屏幕
    $('.chat-msgs').append('<div class="ng-scope"><div class="talk-item talk-a"><div class="talk-item-time ng-binding">'+getNowFormatDate()+'</div><img class="head-photo" src="./image/bf7cd451-3cba-4421-b0b3-b1fd6ac620cb.png"><div class="message-text">'+msg+'</div></div></div>');
        goBottom();
      // 清空输入框
    $('.manual-ueditor').val('');
    $.ajax({
      url: 'http://www.tuling123.com/openapi/api',
      type: 'POST',
      dataType: 'json',
      data: pushdata,
      success:function(data){
        console.log(data);
        if(data.code == 100000){
          $('.chat-msgs').append('<div class="ng-scope"><div class="talk-item talk-b ng-isolate-scope"><div class="talk-item-time ng-binding">'+getNowFormatDate()+'</div><img class="head-photo" src="./image/13701e97-9f30-4a7d-ae11-54536dd44965.png"><div class="message-text">'+data.text+'</div></div></div>');
        }if(data.code == 200000){
          $('.chat-msgs').append('<div class="ng-scope"><div class="talk-item talk-b ng-isolate-scope"><div class="talk-item-time ng-binding">'+getNowFormatDate()+'</div><img class="head-photo" src="./image/13701e97-9f30-4a7d-ae11-54536dd44965.png"><div class="message-text">'+data.text+'<a href="'+data.url+'" target="_blank">'+data.url+'</a></div></div></div>');
        }
        goBottom();
        $('.btn-send').attr('disabled',false);
      }
    });

  }

  function goBottom(){
    var chatMsgs = document.getElementById('chat_msgs');
    chatMsgs.scrollTop=chatMsgs.scrollHeight;
  }
  function getNowFormatDate() {
      var date = new Date();
      var currentdate = date.getHours() + ':' + date.getMinutes();
      return currentdate;
  }

  $('.manual-ueditor').keydown(function(e){ 
    if(e.which == 13 && e.ctrlKey){ 
      $(".btn-send").click(); 
      return false; 
    } 
  }); 

</script>
</body>
</html>